import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Row, Col } from 'antd';

function Feature7(props) {
  return (
    <div className="home-page-wrapper feature7-wrapper">
      <div className="home-page feature7">
        <div className="feature7-title-wrapper">
          <h1 className="feature7-title-h1">图像在线服务</h1>
          <div className="feature7-title-content">你可以直接快速接入图像能力</div>
        </div>
        <OverPack playScale={0.3}>
          <QueueAnim
            key="queue"
            type="bottom"
            leaveReverse
            interval={50}
            component={Row}
            className="feature7-block-wrapper"
            gutter={24}
          >
            <Col md={6} xs={24} key="0" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="1" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="2" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="3" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="4" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="5" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="6" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
            <Col md={6} xs={24} key="7" className="feature7-block">
              <a className="feature7-block-group">
                <img 
                  src="/images/e339fc34-b022-4cde-9607-675ca9e05231.svg" 
                  className="feature7-block-image" 
                  alt="身份证"
                />
                <div className="feature7-block-title">
                  身份证
                </div>
                <div className="feature7-block-content">
                  识别身份证正反面姓名、身份证号、发证机关等相关信息
                </div>
              </a>
            </Col>
          </QueueAnim>
        </OverPack>
      </div>
    </div>
  );
}

export default Feature7;
